<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/params' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片视图区域-->
    <el-card>
      <!--      警告框区域-->
      <el-alert
        title="注意:只能为三级分类添加"
        type="warning"
        show-icon
        :closable="false">
      </el-alert>
      <!--      商品分类区域-->
      <el-row class="goods_list">
        <el-col>
          <span>选择商品分类:</span>
          <!--          级联选择器-->
          <el-cascader
            v-model="selectedKeys"
            :options="cateList"
            :props="cateProps"
            expand-trigger="hover"
            @change="handleChange">
          </el-cascader>
        </el-col>
      
      </el-row>
      <!--      tab栏展示区-->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" :disabled="isDisabeled" @click="dialogVisible=true">动态参数</el-button>
          <!--          动态参数表格-->
          <el-table :data="manyTableData" border stripe>
            <el-table-column type="expand"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row.attr_id)">编辑
                </el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeParams(scope.row.attr_id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" :disabled="isDisabeled" @click="dialogVisible=true"> 静态属性</el-button>
          <el-table :data="onlyTableData" border stripe>
            <el-table-column type="expand"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row.attr_id)">编辑
                </el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeParams(scope.row.attr_id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!--  添加对话框区域-->
    <el-dialog
      :title="'添加'+titleText"
      :visible.sync="dialogVisible"
      width="50%"
      @close="dialogClose">
      <el-form :model="addParamsForm" :rules="addParamsRule" ref="addParamsRef" label-width="100px">
        <el-form-item :label="titleText" prop="attr_name">
          <el-input v-model="addParamsForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParams">确 定</el-button>
      </span>
    </el-dialog>
    <!--    修改对话框-->
    <el-dialog
      :title="'修改'+titleText"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClose">
      <el-form :model="editParamsForm" :rules="editParamsRule" ref="editParamsRef" label-width="100px">
        <el-form-item :label="titleText" prop="attr_name">
          <el-input v-model="editParamsForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Params",
    data() {
      return {
        //分类列表数组
        cateList: [],
        //级联选择器配置对象
        cateProps: {
          value: "cat_id",
          label: 'cat_name',
          children: 'children'
        },
        //级联选择器双向绑定数据
        selectedKeys: [],
        //tab栏中默认选中的
        activeName: 'many',
        //动态参数
        manyTableData: [],
        //静态数据
        onlyTableData: [],
        //对话框隐藏
        dialogVisible: false,
        // 添加表单的数据对象
        addParamsForm: {
          attr_name: ''
        },
        //验证规则对象
        addParamsRule: {
          attr_name: [
            {required: true, message: '请输入动态参数', trigger: 'blur'}
          ],
        },
        //修改对话框
        editDialogVisible: false,

        //修改表单数据对象
        editParamsForm: {
          attr_name: '',
        },
        //修改功能验证规则
        editParamsRule: {
          attr_name: [
            {required: true, message: '请输入动态参数', trigger: 'blur'}
          ],
        },
      }
    },

    created() {
      //获取分类列表
      this.getCateList()
    },
    methods: {
      async getCateList() {
        const {data: res} = await this.$http.get('categories')
        // console.log(res)
        if (res.meta.status !== 200) this.$message.error('获取分类列表失败')
        this.cateList = res.data
        // console.log(this.cateList)
      },
      //级联选择器发生改变时触发
      handleChange() {
        this.getParams()
      },
      //tab栏切换点击事件
      handleClick() {
        this.getParams()
      },
      //封装一个获取参数列表的函数
      async getParams() {
        // console.log(this.selectedKeys)
        //如果数组的长度不等于3,那么选中的不是三级分类
        if (this.selectedKeys.length !== 3) {
          this.selectedKeys = []
          return
        }
        const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`, {
          params: {
            sel: this.activeName
          }
        })
        if (res.meta.status !== 200) {
          this.$message.error('获取列表数据失败')
        }
        console.log(res.data)
        //判断获取到的是静态数据还是动态数据
        if (this.activeName === 'many') {
          this.manyTableData = res.data
        } else {
          this.onlyTableData = res.data
        }
      },
      //给对话框添加关闭时间
      dialogClose() {
        this.$refs.addParamsRef.resetFields()
      },
      //添加分类
      addParams() {
        this.$refs.addParamsRef.validate(async valid => {
          if (!valid) return
          let {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`, {
            attr_name: this.addParamsForm.attr_name,
            attr_sel: this.activeName
          })
          if (res.meta.status !== 201) this.$message.error('添加参数失败')
          console.log(res.data)
          this.$message.success('添加参数成功')
          this.dialogVisible = false
          this.getCateList()
        })
      },
      //点击关闭修改按钮
      editDialogClose() {
        this.$refs.editParamsRef.resetFields()
      },
      //修改确认按钮
      editParams() {
        this.$refs.editParamsRef.validate(async valid => {
          if (!valid) return
          let {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editParamsForm.attr_id}`, {
            attr_name: this.editParamsForm.attr_name,
            attr_sel: this.activeName
          })
          if (res.meta.status !== 200) this.$message.error('修改用户信息失败')
          this.getParams()
          this.editDialogVisible = false
        })
      },
      //点击编辑功能确认按钮
      async editDialog(attr_id) {
        let {data: res} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`)
        // console.log(res)
        if (res.meta.status !== 200) this.$message.error('获取参数信息失败')
        this.editParamsForm = res.data
        this.editDialogVisible = true
      },
      async removeParams(attr_id) {
        let result = await this.$confirm('此操作将永久删除参数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (result !== 'confirm') {
          return this.$message.info('已取消删除')
        }
        let {data: res} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)
        console.log(res.data)
        if (res.meta.status !== 200) this.$message.error('删除参数失败')
        this.$message.success('删除操作成功')
        this.getParams()
      }

    },

    computed: {
      isDisabeled() {
        return this.selectedKeys.length !== 3;
      },
      //获取分类参数的id
      cateId() {
        if (this.selectedKeys.length === 3) {
          return this.selectedKeys[2]
        }
        return null
      },
      //对话框标题部门
      titleText() {
        if (this.activeName === 'many') {
          return '动态参数'
        } else {
          return '静态属性'
        }
      }
    }
  }
</script>

<style scoped>
  .goods_list {
    margin-top: 15px;
    font-size: 16px;
    margin-bottom: 15px;
  }
</style>
